<template>
  <view>
    <u-sticky>
      <u-navbar title=" " placeholder @leftClick="onLeftClick" :fixed="false">

        <view slot="left">
          <view class="page-header center">
            <view class="left-icon center">
              <!-- <u-icon name="account-fill" color="#65AB6C" size="50rpx"></u-icon> -->
              <image :src="Object.keys(loginData).length === 0 ? '../../static/images/smallTx.svg' : loginData.avatar"
                style="width:50rpx;height:50rpx;border-radius:50%" />
            </view>
            <view style="font-size: 28rpx; font-weight: 400; color: #333">
              {{ Object.keys(loginData).length === 0 ? '未登录，点击前往登录页' : loginData.nickName }}
            </view>
          </view>
        </view>
      </u-navbar>
    </u-sticky>

    <view style="padding:0 30rpx;">
      <!-- <u-input
          placeholder="请输入关键字"
          prefixIcon="search"
          prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
          customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx"
      ></u-input> -->

      <view style="margin-top: 28rpx">
        <u-swiper height="280rpx" radius="24rpx" :list="list3" indicator indicatorMode="line" circular></u-swiper>
      </view>
      <view class="nav-list">
        <view v-for="item in navList" :key="item.key" class="nav-list-item" @click="onJumpTab(item)">
          <view :style="{ backgroundColor: item.color }" class="center nav-list-item-top">
            <image :src="item.url" mode="widthFix" style="width: 60rpx; height: 60rpx" />
          </view>
          <view class="nav-list-item-text">{{ item.text }}</view>
        </view>
      </view>

      <view class="index-home-vip" @click="isPopup = true">
        <image class="index-home-vip-left-icon" :src="'/static/images/indexHomeVipIcon.svg'" mode="widthFix"
          style="width: 78rpx; height: 72rpx" />
        <view class="index-home-vip-content">
          <view class="index-home-vip-content-title">会员中心</view>
          <view class="describe-text">解锁学习新方式</view>
        </view>
        <image :src="'/static/images/indexHomeVipImg.png'" mode="widthFix" style="width: 128rpx; height: 112rpx" />
      </view>

      <view class="footer-div">
        <view class="footer-div-title">
          <view class="footer-div-title-left">在线练测</view>
          <view class="footer-div-title-right" @click="onJump">
            <view>查看更多</view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="footer-list">
          <view v-if="onlineStudyList.length === 0" class="center" style="width: 100%; height: 100%">
            <u-empty mode="list">
            </u-empty>
          </view>
          <view v-for="(item, index) in onlineStudyList" :key="index" class="footer-list-item"
            @click="onJumpSubject(item)">
            <view class="footer-list-item-img">
              <!-- <image src="/static/images/indeHomePM.png" style="width: 100%; height: 100%" class="footer-list-item-img"> -->
              <image :src="images[index]" style="width: 100%; height: 100%" class="footer-list-item-img">
              </image>
              <view class="footer-list-item-img-text">{{ item.status === 1 ? '练测中' : '已停用' }}</view>
            </view>
            <view class="footer-list-item-title">{{ item.practiceName }}</view>
            <view class="describe-text" style="margin-top: 14rpx">{{ item.planName }}</view>
            <view class="describe-text" style="margin-top: 20rpx">截止到：{{ item.endTime ? item.endTime : '不限时' }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-popup :show="isPopup" :round="15" mode="bottom" @close="isPopup = false">
      <view class="flex item-center between" style="padding: 40rpx; border-bottom: 1px solid #F5F5F5;">
        <view></view>
        <view class="popTitle">暂未开放</view>
        <view style="padding: 10rpx">
          <u-icon name="close" :bold="true" @click="isPopup = false" />
        </view>
      </view>
      <view class="flex flex-column center" style="padding: 57rpx 0 100rpx 0;">
        <image src="../../static/images/user/noOpen.svg" style="width: 360rpx;height: 270rpx;margin-bottom: 26rpx;" />
        <text style="font-size: 28rpx;">此功能暂未开放，敬请期待</text>
      </view>
    </u-popup>
    <MTabBar :value="0" />
  </view>
</template>

<script>
import { getArrObjectByProperty, notificationFun } from '@/utils/PrjUtils';
import { pageBzPractice } from "../../services/IndexService";
import { listBzPublicPractice } from "../../services/IndexService";
import { onDict } from '../../services/ServerService';


export default {
  data() {
    return {
      loginData: {},
      bottomQuery: {
        queryType: '',
        queryKey: '',
        pageNo: 1,
        pageSize: 4,
        done: false
      },
      isPopup: false,
      mapDictCodesData: {},
      windowWidth: '',
      windowHeight: '',
      navList: [
        {
          text: '拍照搜题',
          key: 'photoSearchQuestions',
          color: '#F8FFF6',
          url: '/static/images/indexHomeNavListIcon1.svg',
          route: '../../photograph/index'
        },
        {
          text: '题库市场',
          key: 'questionBankMarket',
          color: '#EEFDFF',
          url: '/static/images/indexHomeNavListIcon2.svg',
          route: '../../questionBankMarket/index'
        },
        {
          text: '教材资源',
          key: 'textbookResources',
          color: '#FDF9F1',
          url: '/static/images/indexHomeNavListIcon3.svg',
          route: '../../teachingMaterial/index'
        },
        {
          text: '资料文档',
          key: 'dataDocument',
          color: '#F3F3FF',
          url: '/static/images/indexHomeNavListIcon4.svg',
          route: '../../dataDocument/showFileList'
        },
      ],
      onlineStudyList: [
      ],
      list3: [
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A7.png',
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A8.png',
      ],
      images: [
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A1.png',
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A2.png',
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A3.png',
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A4.png',
        'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A5.png',
        'ihttps://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A6.png'
      ]
    }
  },
  onShow() {
    if (uni.getStorageSync('appKey')) {
      console.log(uni.getStorageSync('appKey'), "uni.getStorageSync('appKey')");

      this.loginData = {
        ...uni.getStorageSync('loginData'),
      };
      this.onPageBzPractice();
    } else {
      this.loginData = {};
      this.onListBzPublicPractice();
    }
    uni.getSystemInfo({
      success: (res) => {
        this.windowWidth = res.windowWidth
        this.windowHeight = res.windowHeight
      }
    })
    // this.onMapDictCodes()
  },
  onPullDownRefresh() {
    console.log('下拉刷新触发');
    this.onPageBzPractice(); // 调用刷新数据的方法
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 2000);
  },
  onReachBottom() {
    console.log('触底');
  },
  watch: {},
  computed: {},
  methods: {
    onMapDictCodes() {
      onDict('SysEnableStatus').then(res => {
        this.mapDictCodesData = res
      })
    },
    onChangeDict(val, dict) {
      if (dict) {
        return getArrObjectByProperty(dict, 'value', val)?.text || ''
      }
    },

    onJumpTab(item) {
      // this.isPopup = true
      console.log(item, 'item');
      uni.navigateTo({
        url: item.route
      })
    },
    onListBzPublicPractice() {
      listBzPublicPractice().then(res => {
        this.onlineStudyList = res
      });
    },
    onLeftClick() {
      if (!uni.getStorageSync('appKey')) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
      else {
        uni.navigateTo({
          url: `/pages/userInfo/userInfo`
        })
      }
    },

    onPageBzPractice() {
      pageBzPractice(this.bottomQuery).then(res => {
        console.log(res)
        this.onlineStudyList = res.datas;
      })
    },

    onJump() {
      uni.navigateTo({
        url: '/pages/practiceTesting/practiceTestingPage'
      })
    },
    onJumpSubject(item) {
      if (item.status === 2) {
        notificationFun('当前练测已停用，请联系管理员')
      } else {
        uni.navigateTo({
          url: '/pages/practiceTesting/practicePage?planItem=' + encodeURIComponent(JSON.stringify(item))
        })
      }

    }
  }
}
</script>

<style>
page {
  background-color: #fff !important;
  padding-bottom: 160rpx;
}

.page-header {
  display: flex;
  align-items: center;
}

.left-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(246, 255, 247, 1);
  margin-right: 28rpx;
}

.nav-list {
  margin-top: 36rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-list-item {
  width: 128rpx;
  height: 192rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.nav-list-item-top {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}

.nav-list-item-text {
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
}

.index-home-vip {
  margin-top: 46rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: rgba(246, 255, 247, 1);
  padding: 0 20rpx;
  border-radius: 24rpx;
}

.index-home-vip-left-icon {
  margin-right: 40rpx;
  margin-left: 20rpx;
}

.index-home-vip-content {
  flex: 1;
}

.index-home-vip-content-title {
  font-size: 36rpx;
  color: rgba(55, 184, 116, 1);
  font-weight: bold;
}

.footer-div {
  margin-top: 36rpx;
}

.footer-div-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40rpx;
}

.footer-div-title-left {
  font-size: 36rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.footer-div-title-right {
  display: flex;
  font-size: 24rpx;
  color: rgba(102, 102, 102, 1);
}

.footer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-list-item {
  width: 49%;
  margin-bottom: 40rpx;
}

.footer-list-item-img {
  width: 100%;
  height: 204rpx;
  border-radius: 32rpx;
  position: relative;
  overflow: hidden;
}

.footer-list-item-img-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  font-size: 22rpx;
  padding: 10rpx 40rpx;
  background: rgba(0, 0, 0, 0.46);
}

.footer-list-item-title {
  margin-top: 38rpx;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
  font-weight: bold;
}

.bgText {
  color: #fff;
  margin-left: 30rpx;
  margin-bottom: 30rpx;
}
</style>
